<template>
  <div>
    <div style="margin-top: 2%;text-align:center;">
      <el-select  v-model="form.termId"
                  style="width: 15%;margin-right: 0.6%"
                  clearable filterable
                  placeholder="请选择学期">
        <el-option v-for="item in terms" :key="item.termId"
                   :label="item.termName" :value="item.termId">
        </el-option>
      </el-select>
      <el-select  v-model="form.courseId"
                  style="width: 18%;margin-right: 0.6%"
                  clearable filterable
                  placeholder="请选择课程">
        <el-option v-for="item in course" :key="item.courseId"
                   :label="item.courseId +' - '+ item.courseName"
                   :value="item.courseId">
        </el-option>
      </el-select>
      <el-select  v-model="form.teachState"
                  style="width: 12.5%;margin-right: 0.6%"
                  clearable
                  placeholder="请选择待查找的完成状态">
        <el-option label="待确认" :value="0"/>
        <el-option label="进行中" :value="1"/>
        <el-option label="已完成" :value="2"/>
        <el-option label="全部" :value="null"/>
      </el-select>
      <el-input style="width: 20%;margin-right: 0.6%" v-model="form.teachName"
                placeholder="请输入待查找的课程安排名称"></el-input>
      <el-button @click="findTeachTask()" style="font-size: 20px;" type="primary">立即查找</el-button>
    </div>

    <template style="margin-top: 2%">
      <el-table :data="pageInfo.list" style="width: 100%">
        <el-table-column label="" width="10">
        </el-table-column>
        <el-table-column label="课程安排名称" width="220" prop="teachId" sortable>
          <template slot-scope="scope">
            <span>{{scope.row.teachName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="课程" width="220">
          <template slot-scope="scope">
            <div v-for="item in course" :key="item.courseId">
              <span v-if="item.courseId === scope.row.courseId">{{item.courseName}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="学期"  width="200" prop="termId" sortable>
          <template slot-scope="scope">
            <div v-for="item in terms" :key="item.termId">
              <span v-if="item.termId === scope.row.termId">{{item.termName}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="考察方式" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.method}}</span>
          </template>
        </el-table-column>
        <el-table-column label="已选择班级" width="120">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <div v-for="item in scope.row.clazzes" :key="item.clazzId">
                <p>{{item.clazzId + '班'}}</p>
              </div>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">查看班级</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="已选择学生" width="120">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <div v-for="item in scope.row.students" :key="item.stuId">
                <p>{{item.stuId + ' - ' + item.stuName}}</p>
              </div>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">查看学生</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="及格分" width="80">
          <template slot-scope="scope">
            <span>{{scope.row.passingScore}}</span>
          </template>
        </el-table-column>
        <el-table-column label="满分" width="90">
          <template slot-scope="scope">
            <span>{{scope.row.fullScore}}</span>
          </template>
        </el-table-column>
        <el-table-column label="平时成绩" width="80">
          <template slot-scope="scope">
            <span v-if="parseInt(scope.row.usualPct) !== 0">{{scope.row.usualPct}}</span>
          </template>
        </el-table-column>
        <el-table-column label="实践成绩" width="80">
          <template slot-scope="scope">
            <span v-if="parseInt(scope.row.expPct) !== 0">{{scope.row.expPct}}</span>
          </template>
        </el-table-column>
        <el-table-column label="期中成绩" width="80">
          <template slot-scope="scope">
            <span v-if="parseInt(scope.row.midPct) !== 0">{{scope.row.midPct}}</span>
          </template>
        </el-table-column>
        <el-table-column label="期末成绩" width="80">
          <template slot-scope="scope">
            <span v-if="parseInt(scope.row.finalPct) !== 0">{{scope.row.finalPct}}</span>
          </template>
        </el-table-column>
        <el-table-column label="其它成绩" width="80">
          <template slot-scope="scope">
            <span v-if="parseInt(scope.row.otherPct) !== 0">{{scope.row.otherPct}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.teachState===0"  size="mini" type="primary" style="font-size: 16px"
                       @click="taskCheck(scope.row)">确认安排</el-button>
            <el-button v-if="scope.row.teachState===1"  size="mini" type="primary" style="font-size: 16px"
                       @click="intoTeachTask(scope.row)">进入安排</el-button>
            <span v-if="scope.row.teachState===2" style="color: #67c23a;font-weight: bold">已完成</span>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-bottom: 1%;"></div>
      <el-pagination
          style="text-align: center;"
          background
          layout="total,prev, pager, next"
          :total="pageInfo.total"
          :page-size="pageInfo.pageSize"
          @current-change="handleCurrentChange">
      </el-pagination>
    </template>
  </div>
</template>

<script>
export default {
  data(){
    return{
      currPage: 1,
      pageInfo:{},
      form:{
        termId: '',
        teachName:'',
        teacherId:'',
        courseId:'',
        teachState: '',
      },
      terms:[],
      academy:[],
      teacher:[],
      course:[],
    }
  },
  created() {
    this.form.teacherId = JSON.parse(sessionStorage.getItem("id"))
    this.termInit();
    this.courseInit();
    this.getData();
  },
  methods:{
    intoTeachTask(row){//进入具体的一个教学安排
      this.$router.push(`/teacher/uploadGrades/${row.teachId}`);
    },
    taskCheck(row){//教学安排确认
      this.$confirm('教学安排确认后则再也不可更改，您真的要确认吗？').then(()=>{
        if(row.teachState != null && row.teachState === 0){
          let path = 'http://localhost:8081/teach/confirmTeachTask';
          this.$ajax.post(path,row).then(res=>{
            if(res.data.status === 0){
              this.$message.success(res.data.message);
            }
            else{
              this.$message.error(res.data.message);
            }
            this.getData();
          })
        }
        else{
          this.$message.error('数据异常!');
          this.getData();
        }
      })
    },
    findTeachTask(){//查找
      this.currPage = 1;
      this.getData();
    },
    handleCurrentChange(val){//翻页
      this.currPage = val;
      this.getData();
    },
    getData(){//获取数据
      let path = `http://localhost:8081/teach/getTeachTasks/${this.currPage}`;
      this.$ajax.post(path,this.form).then(res=>{
        this.pageInfo = res.data;
      })
    },
    termInit(){//初始化学期
      let path = 'http://localhost:8081/term/getTerms';
      this.$ajax.post(path).then(res=>{
        this.terms = res.data.list
      })
    },
    courseInit(){//初始化课程
      let path = 'http://localhost:8081/course/getCourses';
      this.$ajax.post(path).then(res=>{
        this.course = res.data.list
      })
    },
  }
}
</script>

<style scoped>
span{
  font-size: 18px;
}
</style>